<template>
  <div id="Main" class="main">
    <div class="content-main">
      <div class="header">
        <div class="header-content">

          <img src="../../../static/assets/1.jpg" style="display: block;width:100%;"/>
        </div>
        <div class="nav">
          <ul class="nav-ul" style="width: 1025px;margin: 0 auto;margin-left: 10%;">
            <router-link to="/" exact><li class="select" style="width: 7%"><a href="#">首页</a></li></router-link>
            <router-link to="/Survey"><li style="width:12%"><a href="#">工商联概况</a></li></router-link>
            <router-link to="/EconomicTrade"><li style="width:10%"><a href="#">经贸天地</a></li></router-link>
            <router-link to="/MembersDemeanor"><li style="width:10%"><a href="#">会员风采</a></li></router-link>
            <router-link to="/ResearchService"><li style="width:10%"><a href="#">调研服务</a></li></router-link>
            <router-link to="/TeachingEducation"><li style="width:10%"> <a href="#">宣教培训</a></li></router-link>
            <router-link to="/ExternalLiaison"><li style="width:10%"><a href="#">对外联络</a></li></router-link>
            <router-link to="/LegalProtection"><li style="width:10%"><a href="#">法律维权</a></li></router-link>
            <router-link to="/PartybuildingGarden"><li style="width:10%"><a href="#">党建园地</a></li></router-link>
          </ul>
        </div>
      </div>
      <div class="middle-content">
        <router-view></router-view>
      </div>
    </div>
    <div class="footer">
      <p>地址：工农大路825号 联系电话：0431-85086937 <a href="http://www.miibeian.gov.cn" target="_blank">吉ICP备11003677 号-1</a></p>
      <p>中文域名：吉林省工商业联合会 • 中国 吉林省总商会 • 中国</p>
      <p><a href="http://www.jlszsh.net/" target="_blank"><img src="../../../static/assets/red.png" alt=""></a></p>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
import {Storage} from '../../publicLib/utils-lib/main'

let localStorage = new Storage('sessionStorage');

export default {
  name: 'Main',
  data () {
    return {
      mainBarIndex: '0'
    }
  },
  methods: {
    /* 设置导航栏选中状态 */
    navSelectHandle () {

      $('.nav-ul li').each(function (index) {
        $(this).click(function () {
          let dom = $('.nav-ul li');
          dom.removeClass('select');
          dom.eq(index).addClass('select');

          //记录当前导航栏索引值
          localStorage.setItem('mainBarIndex', index);
        })
      })
    },
    /* 刷新浏览器后导航栏重定位 */
    redirctBar () {
      let curIndex = localStorage.getItem('mainBarIndex');

      if (curIndex) {
        $('.nav-ul li').each(function (index) {
          let dom = $('.nav-ul li');
          dom.removeClass('select');
          if (index === parseInt(curIndex)) {
            dom.eq(index).addClass('select');
            return false;
          }
        })
      }
    }
  },
  mounted() {
    this.navSelectHandle();
    this.redirctBar()
  },
  /* 页面销毁时清除缓存 */
  destroyed () {
    localStorage.removeItem('mainBarIndex')
  }
}

</script>

<style lang="scss" scoped>

.select{
  background: #BD995D;
}
ul li{
  list-style: none;
}
.main{
  width: 100%;

  .content-main{
    width: 72rem;
    margin: 0 auto;

    text-align: center;

    .header{

      width:100%;

      .header-content{
        width: 100%;
        text-align: left;
        padding: 0;

      }

      .nav{
        width: 100%;
        margin: 0 auto;
        height: 4rem;
        background: #0C4BB4;
        display:flex;
        align-items: center;

        white-space: nowrap;

        .nav-ul{
          margin:0 auto;

          li{
            list-style: none;
            float: left;
            font-size: 1.3rem;

            line-height: 4rem;
            cursor: pointer;

            &:hover{
              background: cornflowerblue;
            }

            a{
              color: white;
              text-decoration: none;
              line-height: 4rem;
            }
          }
        }
      }
    }

    .footer{

    }
  }

  .footer{
    width:72rem;
    margin:0 auto;
    height: 9rem;
    margin-top: 2rem;
    background-color: #C9E2FF;
    padding-top: 1rem;
    border-top: #0C4BB4 0.2rem solid;
    font-size: 0.8rem;
  }
}
</style>
